<script setup>
const props = defineProps({
  txt: {
    type: String,
    required: true,
    default: '这是一条没的内容的提示'
  },
  subFun: {
    type: Function
  },
  canFun: {
    type: Function
  }
})
</script>

<template>
  <div class="conf-a">
    <transition name="fade-ud" appear>
      <div class="conf-b" style="width: 400px;">
        <div class="conf-c"><i class="iconfont color-w fs20">&#xe6e5;</i> 确认</div>
        <div class="conf-d">{{txt}}</div>
        <div class="conf-e">
          <div class="btn-pi mr15" @click="subFun()"><i class="iconfont">&#xea7c;</i> 确定</div>
          <div class="btn-d" @click="canFun()"><i class="iconfont">&#xea4f;</i> 取消</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.conf-a {position: fixed; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .5); overflow: hidden; display: inline-flex; display: -webkit-inline-flex; justify-content: center; align-items: center;}
.conf-b {background-color: #FFF; box-shadow: 2px 2px 5px #555; border-radius: 4px;}
.conf-c {color: #303133; border-bottom: 1px solid #EEE; padding: 15px; font-size: 18px;}
.conf-d {padding: 20px; overflow: hidden;}
.conf-e {border-top: 1px solid #EEE; padding: 15px; display: flex; display: -webkit-flex; justify-content: flex-end;}
</style>
